<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2021-08-30 10:19:44
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-03-17 10:59:05
 * @Description:人员面板
-->
<template>
  <el-card>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-avatar :size="60" src="https://empty">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
        </el-avatar>
      </el-col>
      <el-col :span="17">
        <el-row type="flex" justify="end" class="mb-10">
          <el-col :span="18">
            <span class="pure-name">{{ userInfo.name }}</span>
            <i class="el-icon-male" />
          </el-col>
          <el-col :span="6" class="right"><span class="pure-period">3年</span></el-col>
        </el-row>
        <el-row :gutter="1" class="mb-10">
          <el-col>
            <el-tooltip placement="top" :content="userInfo.roleName" :disabled="userInfo.roleName.length<=ellipsisCount">
              <span class="team">{{ userInfo.roleName|ellipsis(ellipsisCount) }}</span>
            </el-tooltip>
            <el-tooltip placement="top" :content="userInfo.deptName" :disabled="userInfo.deptName.length<=ellipsisCount">
              <span class="department">{{ userInfo.deptName|ellipsis(ellipsisCount) }}</span>
            </el-tooltip>
            <img :src="require('@/assets/home/leader.png')" alt="组长" class="leader">
          </el-col>

        </el-row>
        <el-row type="flex" justify="end">
          <el-col :span="18">
            <el-rate :value="3.7" disabled />
          </el-col>
          <el-col :span="6" class="right">
            <span class="score">9.5分</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {
  mapGetters,
} from 'vuex';
export default {
  computed: {
    ...mapGetters(['userInfo']),
  },
  async created() {
    this.ellipsisCount = 4;// 设置显示文本长度
  },

};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 25px 16px;
}
.pure-name {
  font-size: 16px;
  font-weight: 600;
  color: #2d405e;
  margin-right: 6px;
}
.pure-period {
  font-size: 14px;
  text-align: right;
  color: #879bba;
}
.score {
  font-size: 14px;
  font-weight: 400;
  color: #2d405e;
}
.el-icon-male {
  color: #55A1EC;
  font-size: 14px;
  font-weight: 600;
}
.right {
  text-align: right;
}
.team,.department {
  background-color: #67C23A;
  color: white;
  font-size: 12px;
  padding: 4px;
  border-radius: 2px;
}
.department {
  background-color: #4B7FDA;
  margin-left: 6px;
}
.leader {
  vertical-align: middle;
  margin-left: 6px;
}
.mb-10 {
  margin-bottom: 10px;
}
</style>
